<!DOCTYPE html>
<html>
<head>
    <title>category form</title>
    <#include "/header.html">
    <style>
        .layui-upload-img {
            max-height: 100px;
        }
    </style>
    <link rel="stylesheet" href="${request.contextPath}/statics/js/lay-module/dtree/dtree.css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/statics/js/lay-module/dtree/font/dtreefont.css" media="all">
</head>
<body class="bg-white">
<div id="appMain">
    <form class="layui-form layuimini-form" action="" lay-filter="dataForm">
        <div class="layui-form-item">
            <label class="layui-form-label required">上级</label>
            <div class="layui-input-block">
                <div id="menuTree" class="dtree" data-id="0" ></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="分类名称不能为空" placeholder="分类名称" value="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <!-- <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-form-mid">
                <input type="hidden" name="image" value="">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-sm layui-bg-black" id="uploadBtn">选择图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="uploadPreview" src="">
                        <p id="uploadText"></p>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="隐藏">
                <input type="radio" name="status" value="1" title="显示" checked="">
            </div>
        </div>
        <div class="layui-form-item menu-order">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="排序号" value="0" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" placeholder="请输入描述信息"></textarea>
            </div>
        </div>

        <div class="layui-hide">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="commitBtn" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="tagsTpl">
    {{#  layui.each(d, function(index, value){ }}
    <button type="button" class="tag-item">{{value}}</button>
    {{#  }); }}
</script>

<script type="text/javascript">
    layui.use(['form', 'dtree', 'laytpl', 'upload', 'tag'], function () {
        var form = layui.form,
            dtree = layui.dtree,
            laytpl = layui.laytpl,
            upload = layui.upload,
            tag = layui.tag,
            $ = layui.$;
        var keywords = [];
        var _parent = parent;
        dtree.render({
            elem: "#menuTree",
            data: _parent.menuTreeData,
            icon: "-1",
            selectInputName: {
                nodeId: "parentId",
                context: "parentName"
            },
            // initLevel: 3,
            select: true, //指定下拉树模式
            done: function(res, $ul, first){
                if(first && _parent.formDataId > 0) {
                    $.ajax({
                        type: "POST",
                        url: serverUrl('portalcategory/info/' + _parent.formDataId),
                        success: function (result) {
                            if (result.code === 0) {
                                form.val('dataForm', result.info);
                                dtree.dataInit("menuTree", result.info.parentId);
                                dtree.selectVal("menuTree");
                                //$('#uploadPreview').attr('src', 'http://localhost:8089/admin/comment/gettu?name='+result.info.image); //url
                                form.render();

                                $(result.info.keyword).each(function (i, v) {
                                    keywords.push(v);
                                });

                                laytpl($("#tagsTpl").html()).render(keywords, function(html){
                                    $("#keywords").html(html);
                                });
                                tag.render();
                                tag.on('add(keywords)', function (data) {
                                    keywords.push($(data.othis).text());
                                    console.log(keywords);
                                });
                                tag.on('delete(keywords)', function (data) {
                                    keywords.splice(data.index, 1);
                                    console.log(keywords);
                                });
                                $('#uploadPreview').attr('src', result.info.image);
                            }
                        }
                    });
                }
            }
        });

        var submitForm = function () {
            var params = form.val('dataForm');
            params['id'] = _parent.formDataId || null;
            params['keyword'] = keywords;
            /*alert(JSON.stringify(params));
            return false;*/
            var method = _parent.formDataId > 0 ? 'update' : 'save';
            submitFormData('portalcategory/'+method, params, function (res) {
                _parent.table.reload();
                _parent.loadMenuData();
            });
        };

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadBtn'
            ,url: serverUrl('oss/file/upload')
            ,auto: false
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#uploadPreview').attr('src', result); //base64
                });
            }
            ,done: function(res){
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                form.val('dataForm', {'image': res.url});
                submitForm();
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            if (data.field.parentId == '') {
                layer.msg('上级不能是空的', {icon: 2, anim: 6});
                return false;
            }
            submitForm();
            return false;
        });

    });
</script>
</body>
</html>